<template>
  <div class="home">
    <div>欢迎来到零一论坛</div>
   
  <hr />

    <div class="bdo">
      <div class="tag">
        <a href="#">1111</a>
        <a href="#">2222</a>

        <span class="rev">4 回帖 • 672 浏览 • 20 悬赏</span>
      </div>
      <div class="bloblist">
        <div>
          <img src="@/assets/avatar/01.jpg" class="avatar" />
        </div>
        <div class="left10">
          <div>aaa-bbbb</div>
          <div>bbbb-asfaslkfas</div>
        </div>
      </div>
      <div class="content">
        许昌 IT 圈创建于 2017 年 05 月 24
        日，今天，旧版的社区和网站将不在维护，新的社区，新的启航！
        最初就是想做一个这样的社区，一直因为精力有限而搁置了，最近忙活了半个月终于上线喽！
        以后会发很多有用的资源在这里，这里需要你们的参与和互动！ [链接]声明
        重要的事情所三遍，这里是一个 非 ....许昌 IT 圈创建于 2017 年 05 月 24
        日，今天，旧版的社区和网站将不在维护，新的社区，新的启航！
        最初就是想做一个这样的社区，一直因为精力有限而搁置了，最近忙活了半个月终于上线喽！
        以后会发很多有用的资源在这里，这里需要你们的参与和互动！ [链接]声明
        重要的事情所三遍，这里是一个 非 ....许昌 IT 圈创建于 2017 年 05 月 24
        日，今天，旧版的社区和网站将不在维护，新的社区，新的启航！
        最初就是想做一个这样的社区，一直因为精力有限而搁置了，最近忙活了半个月终于上线喽！
        以后会发很多有用的资源在这里，这里需要你们的参与和互动！ [链接]声明
        重要的事情所三遍，这里是一个 非 ....许昌 IT 圈创建于 2017 年 05 月 24
        日，今天，旧版的社区和网站将不在维护，新的社区，新的启航！
        最初就是想做一个这样的社区，一直因为精力有限而搁置了，最近忙活了半个月终于上线喽！
        以后会发很多有用的资源在这里，这里需要你们的参与和互动！ [链接]声明
        重要的事情所三遍，这里是一个 非 ....许昌 IT 圈创建于 2017 年 05 月 24
        日，今天，旧版的社区和网站将不在维护，新的社区，新的启航！
        最初就是想做一个这样的社区，一直因为精力有限而搁置了，最近忙活了半个月终于上线喽！
        以后会发很多有用的资源在这里，这里需要你们的参与和互动！ [链接]声明
        重要的事情所三遍，这里是一个 非 ....
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import readme from '../../mock/Java基础2.md'
import HelloWorld from "@/components/HelloWorld";
import Header from "@/components/Header";

import { markdownh } from "@/api/index";
export default {
  name: "Home",
  components: {
    HelloWorld,
    Header,
  },
  data() {
    return {
      markdownh: "",
    };
  },
  created() {
    markdownh().then((data) => {
      this.markdownh = data.data.html;
    });
  },
};
</script>
<style scoped>
.content {
  text-align: left;
  color: grey;
  font-size: 15px;
  height: 60px;
  overflow: hidden;
}
.rev {
  margin-left: 40px;
  display: inline-block;
  position: absolute;
  right: 0px;
}
div.tag {
  position: relative;
  text-align: left;
}
div.tag a {
  margin-left: 10px;
  margin-bottom: 15px;
}
.avatar {
  width: 50px;
  height: 50px;
  text-align: left;
}
.bloblist {
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.left10 {
  margin-left: 10px;
}
</style>
